<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title> 手风琴-兵兵</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				position: relative;
				width: 580px;
				height: 196px;
				margin: 50px auto;
				overflow: hidden;
			}
			ul li{
				position: absolute;
				top: 0;
				width: 40px;
				height: 100%;
				/*overflow: hidden;*/
			}/*
			ul li.on{
				width: 410px;
			}*/
			ul li img{
				height: 100%;
				width: auto;
			}
		</style>
	</head>
	<body>
	    <ul>
	    	<li><img src="images/p1.png" alt=""></li>
	    	<li><img src="images/p2.png" alt=""></li>
	    	<li><img src="images/p3.png" alt=""></li>
	    	<li><img src="images/p4.png" alt=""></li>
	    	<li><img src="images/p5.png" alt=""></li>
	    	<li><img src="images/p6.png" alt=""></li>
	    </ul>

	    <script src="js/animationTime.js"></script>
	    <script>
	    	var aLi = document.getElementsByTagName('li'),
	    		length = aLi.length,
	    		x = 40,
	    		flag = length - 1,
	    		index = 0;
	    	for(var i= 0; i < length;i++){
	    		aLi[i].index = i;
	    		aLi[i].style.left = i*x + "px";
	    		aLi[i].onclick = function(){
	    			fn(this.index);
	    		}
	    	}
	    	aLi[i-1].style.width = '410px';

	    	function fn(y){
	    		if(y !== flag || y !== 0){
		    		animationTime(aLi[y],{width:410},500);
		    		animationTime(aLi[flag],{width:40},500);
		    		if( y < flag){
		    			for(var i = y+1;i < length;i++){
		    				animationTime(aLi[i],{left:340+i*x},500);
		    			}
		    		}else{
		    			for(var i = y;i > 0;i--){
		    				animationTime(aLi[i],{left:i*x},500);
		    			}
		    		}
		    		flag = y;
	    		}
	    		
	    	}
	    </script>
	</body>
</html>